<template>
  <div id="monthlypaysignboard">
    <div class="mothquer">
      <el-form :inline="true" :model="jQuery" class="demo-form-inline">
        <el-form-item label="所属区域">
          <el-select
            style="width: 191px"
            v-model="jQuery.branch_id"
            filterable
            :remote-method="remoteBranch"
          >
            <el-option
              v-for="item in branchData"
              :key="item.id"
              :label="item.name"
              :value="item.id + ''"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="费用发生月份">
          <!-- <el-input v-model="jQuery.data" placeholder="时间"></el-input> -->
          <el-date-picker
            v-model="jQuery.data"
            type="month"
            value-format="timestamp"
            :default-time="['00:00:00', '23:59:59']"
            placeholder="选择月"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" plain @click="onSubmit()">查询</el-button>
          <el-button type="primary" plain @click="replacementCost()"
            >重置</el-button
          >
          <el-button type="primary" plain @click="exportCost()">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="mothtalbe">
      <el-table :data="redTable" border :max-height="maxheight">
        <el-table-column prop="branch_id_name" label="所属区域" width="180">
        </el-table-column>
        <el-table-column
          prop="g_rent_fee"
          label="房租"
          width="80"
          align="right"
        >
        </el-table-column>
        <el-table-column
          prop="g_property_fee"
          label="物业"
          align="right"
          width="80"
        >
        </el-table-column>
        <el-table-column
          prop="g_network_fee"
          label="网费"
          align="right"
          width="80"
        >
        </el-table-column>
        <el-table-column
          prop="g_water_fee"
          label="水费"
          align="right"
          width="80"
        >
        </el-table-column>
        <el-table-column
          prop="g_electric_fee"
          label="电费"
          align="right"
          width="80"
        >
        </el-table-column>
        <el-table-column
          prop="y_vehicle_rental_fee"
          label="车辆租赁费"
          align="right"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="y_consumables_rental_fee"
          label="耗材租赁费"
          align="right"
          width="100"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import {
  // 区域月付
  finance_regional_monthly_payment_detail,
  // 导出
  finance_regional_monthly_payment_export,
} from "@/api/finance";
import { downloadFile } from "@/page/material/common/common";
import { website_list } from "@/api/information";
import { timestamp10 } from "@/utils/mUtils";
export default {
  name: "monthlypaysignboard",

  data() {
    return {
      maxheight: "auto",
      jQuery: {
        data: new Date() * 1, //  时间  10位时间戳
        branch_id: "", // 区域ids
      },
      redTable: [],
      branchData: [],
    };
  },
  mounted() {
    this.financeObj(),
      // 所属区域
      this.remoteBranch();
  },
  methods: {
    financeObj() {
      var param = {
        ...this.jQuery,
        data: this.jQuery.data == "" ? "" : timestamp10(this.jQuery.data),
      };
      finance_regional_monthly_payment_detail(param).then((res) => {
        // console.log(res.data, "red.datat");
        this.redTable = res.data;
        if (this.redTable.length > 8) {
          //一排操作栏
          this.maxheight = document.documentElement.clientHeight - 205;
        } else {
          this.maxheight = "auto";
        }
      });
    },
    async remoteBranch(query) {
      let result = await website_list({
        branch_type: "3",
        name: "",
      });
      // // console.log(result,"resultresult")
      this.branchData = result.data;
    },
    onSubmit() {
      this.financeObj();
    },
    replacementCost() {
      Object.assign(this.$data.jQuery, this.$options.data().jQuery);
      this.financeObj();
    },
    exportCost() {
      var param = {
        ...this.jQuery,
        data: this.jQuery.data == "" ? "" : timestamp10(this.jQuery.data),
      };
      finance_regional_monthly_payment_export(param).then((res) => {
        if (res.code == 10000) {
          window.open("https://" + res.data.loaded_url);
          this.$message({
            type: "success",
            message: "导出成功",
          });
        }
      });
    },
  },
};
</script>
<style scoped lang="less">
#monthlypaysignboard {
  background-color: #fff;
  padding: 10px 15px;
}
</style>